import {
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {Alert, Tabs} from 'antd';
import React,{useEffect} from 'react';
import ProForm, { ProFormText} from '@ant-design/pro-form';
import {useIntl, connect, FormattedMessage,history} from 'umi';
import type {Dispatch} from 'umi';
import type {StateType} from '@/models/login';
import type {LoginParamsType} from '@/services/login';
import type {ConnectState} from '@/models/connect';

import styles from './index.less';

export type LoginProps = {
  dispatch: Dispatch;
  userLogin: StateType;
  submitting?: boolean;
};

const LoginMessage: React.FC<{
  content: string;
}> = ({content}) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);

const Login: React.FC<LoginProps> = (props) => {
  //判断用户是否登录
  useEffect(() => {
    const userInfo = localStorage.getItem('userInfo');
    if(userInfo) history.replace('/')
  },[])


  const {userLogin = {}, submitting} = props;

  // @ts-ignore
  const {status} = userLogin;
  const intl = useIntl();

  const handleSubmit = (values: LoginParamsType) => {
    const {dispatch} = props;
    dispatch({
      type: 'login/login',
      payload: {...values},
    });
  };
  return (
    <div className={styles.main}>
      <ProForm
        initialValues={{
          autoLogin: true,
        }}
        submitter={{
          render: (_, dom) => dom.pop(),
          submitButtonProps: {
            loading: submitting,
            size: 'large',
            style: {
              width: '100%',
            },
          },
        }}
        onFinish={(values) => {
          handleSubmit(values as LoginParamsType);
          return Promise.resolve();
        }}
      >
        <Tabs activeKey='email'>
          <Tabs.TabPane
            key="email"
            tab="用户登录"
          />
        </Tabs>

        {status === 'error' && !submitting && (
          <LoginMessage
            content={intl.formatMessage({
              id: 'pages.login.accountLogin.errorMessage',
              defaultMessage: 'Incorrect account or password（admin/ant.design)',
            })}
          />
        )}


        <ProFormText
          name="email"
          fieldProps={{
            size: 'large',
            prefix: <UserOutlined className={styles.prefixIcon}/>,
          }}
          placeholder={intl.formatMessage({
            id: 'pages.login.username.email',
            defaultMessage: 'Username: admin or user',
          })}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="pages.login.username.required"
                  defaultMessage="Please enter user name!"
                />
              ),
            },
            {
              type:'email',
              message:'请输入正确的邮箱格式'
            }
          ]}
        />
        <ProFormText.Password
          name="password"
          fieldProps={{
            size: 'large',
            prefix: <LockOutlined className={styles.prefixIcon}/>,
          }}
          placeholder="请输入密码:123123"
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="pages.login.password.required"
                  defaultMessage="Please enter password！"
                />
              ),
            },
          ]}
        />


        <div
          style={{
            marginBottom: 24,
          }}
        >


        </div>
      </ProForm>

    </div>
  );
};

export default connect(({login, loading}: ConnectState) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
